<!doctype html>
<html>
    <head>
        <title>{title}</title>
        <meta name="{meta}" />
        <link
            rel="icon"
            type="image/x-icon"
            href="/rio-base-url-placeholder/rio/favicon.png"
        />
        <link rel="stylesheet" href="css/style.scss" />
        <script>
            /// Apply the theme's background color. This is done immediately in
            /// the `index.html` to avoid the users getting flashbanged by a
            /// completely white screen while loading.
            const LIGHT_THEME_BACKGROUND_COLOR =
                "{light_theme_background_color}";
            const DARK_THEME_BACKGROUND_COLOR = "{dark_theme_background_color}";

            let useLightTheme = !window.matchMedia(
                "(prefers-color-scheme: dark)"
            ).matches;
            let themeVariables;

            // Apply the background color and also set a data attribute on the
            // HTML. This will be used by CSS to switch code highlighting
            // themes.
            if (useLightTheme) {
                document.documentElement.style.backgroundColor =
                    LIGHT_THEME_BACKGROUND_COLOR;
                document.documentElement.setAttribute("data-theme", "light");
            } else {
                document.documentElement.style.backgroundColor =
                    DARK_THEME_BACKGROUND_COLOR;
                document.documentElement.setAttribute("data-theme", "dark");
            }
        </script>
        <script>
            globalThis.SESSION_TOKEN = "{session_token}";
            globalThis.PING_PONG_INTERVAL_SECONDS = "{ping_pong_interval}";
            globalThis.RIO_DEBUG_MODE = "{debug_mode}";
            globalThis.RUNNING_IN_WINDOW = "{running_in_window}";
            globalThis.CHILD_ATTRIBUTE_NAMES = "{child_attribute_names}";

            // Always end with a slash
            globalThis.RIO_BASE_URL = "/rio-base-url-placeholder/";

            globalThis.initialMessages = "{initial_messages}";
        </script>
        <script src="code/app.ts" type="module"></script>
    </head>

    <body class="rio-switcheroo-background"></body>
</html>
